<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" href="/css/main.css"/>
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load('visualization', '1', {packages: ['table']});
		</script>
		<script type="text/javascript">
			var visualization;
			var data;

			var options = {
				'width': '400px',
				'height': '160px'
			};

			function drawVisualization() {
				var dataAsJson = 
				{
					cols:[
						{id:'A',label:'Wert 1',type:'string'},
						{id:'B',label:'Wert 2',type:'number'}
					],
					rows:[
						{c:[{v:'Zeile 1'},{v:1,f:'1'}]},
						{c:[{v:'Zeile 2'},{v:2,f:'2'}]},
						{c:[{v:'Zeile 3'},{v:3,f:'3'}]},
						{c:[{v:'Zeile 4'},{v:4,f:'4'}]},
						{c:[{v:'Zeile 5'},{v:5,f:'5'}]},
						{c:[{v:'Zeile 6'},{v:6,f:'6'}]},
						{c:[{v:'Zeile 7'},{v:7,f:'7'}]},
						{c:[{v:'Zeile 8'},{v:8,f:'8'}]},
						{c:[{v:'Zeile 9'},{v:9,f:'9'}]},
						{c:[{v:'Zeile 10'},{v:10,f:'10'}]},
						{c:[{v:'Zeile 11'},{v:11,f:'11'}]},
						{c:[{v:'Zeile 12'},{v:12,f:'12'}]},
						{c:[{v:'Zeile 13'},{v:13,f:'13'}]},
						{c:[{v:'Zeile 14'},{v:14,f:'14'}]},
						{c:[{v:'Zeile 15'},{v:15,f:'15'}]},
						{c:[{v:'Zeile 16'},{v:16,f:'16'}]}
					]
				};

				data = new google.visualization.DataTable(dataAsJson);
      
				visualization = new google.visualization.Table(document.getElementById('table'));
				visualization.draw(data, options);
			}

			google.setOnLoadCallback(drawVisualization);
	    </script>
	</head>
	<body>
		<h1>Scrollable Table</h1>
		<div id="table"></div>
	</body>
</html>